<template>
  <view class="form-area">
    <view class="form-title">
      <view class="form-title-main">
        <text class="form-title-highlight">输入所有值</text>
        <view class="form-title-arrow">↙</view>
      </view>
      <button class="example-btn" size="mini" @tap="fillAllExample">加载示例数据</button>
      <button class="clear-btn" size="mini" @tap="clearAll">清除</button>
    </view>
    <view class="form-list">
      <view class="form-item" v-for="(item, idx) in fields" :key="item.key" :class="{ missing: missingIdxs.includes(idx) }">
        <view class="label-wrap" @tap="fillExample(idx)">
          <text class="required">*</text>
          <view class="label">{{ item.label }}</view>
        </view>
        <input class="input" v-model="item.value" :placeholder="item.value ? '' : ('例如: ' + item.example)" :type="item.type || 'digit'" />
        <view class="unit-picker-wrap">
          <picker v-if="item.unitOptions"
                  :range="item.unitOptions"
                  :value="item.unitIdx"
                  @change="onPickerChange(idx, $event)">
            <view class="unit-select-btn">
              <text class="unit-text">{{ item.unitOptions[item.unitIdx] }}</text>
              <text class="unit-arrow">▼</text>
            </view>
          </picker>
          <view v-else class="unit">{{ item.unit }}</view>
          <view v-if="item.unitOptions" class="unit-desc">{{ getUnitDesc(item) }}</view>
          <!-- 尿素下方蓝色提示 -->
          <view v-if="item.key === 'urea'" class="bun-tip">
            <text class="bun-tip-link" @tap="showBunDialog = true">从BUN转换？</text>
          </view>
        </view>
      </view>
    </view>
    <button class="submit-btn" type="primary" @tap="onSubmit">计算血龄</button>
    <!-- 表单底部蓝色提示 -->
    <view class="bottom-tip">
      <text class="bottom-tip-link" @tap="showWhereDialog = true">MSCV、PDW 和 PCT 在哪里？</text>
    </view>
    <!-- BUN转换弹窗 -->
    <view v-if="showBunDialog" class="dialog-mask">
      <view class="dialog-box">
        <view class="dialog-title">如何将 BUN 转换为 UREA?</view>
        <view class="dialog-content">
          北美的实验室使用BUN，而世界其他地区的实验室使用尿素。<br/><br/>
          尿素氮【毫克/分升】x 0.357 = 尿素【毫摩尔/升】<br/><br/>
          1. 以毫克/分升(mg/dL)为单位测量尿素氮<br/>
          2. 乘以 0.357<br/>
          3. 您的结果是尿素，单位为mmol/L（不是mg/dL）
        </view>
        <button class="dialog-close" @tap="showBunDialog = false">关闭</button>
      </view>
    </view>
    <!-- MSCV等弹窗 -->
    <view v-if="showWhereDialog" class="dialog-mask">
      <view class="dialog-box">
        <view class="dialog-title">MSCV、PDW 和 PCT 在哪里？</view>
        <view class="dialog-content">
          这些指标可能在您的血常规报告的“血小板参数”部分，或以“平均血小板体积(MPV)”“血小板分布宽度(PDW)”等名称出现。<br/><br/>
          如未找到，可咨询您的检验科医生或报告提供方。
        </view>
        <button class="dialog-close" @tap="showWhereDialog = false">关闭</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(['submit'])
const fields = ref([
  { key: 'age', label: '年龄', example: '42', value: '' , unit: '年' },
  { key: 'glucose', label: '葡萄糖', example: '5.6', value: '', unitOptions: ['mmol/L', 'mg/dL'], unitIdx: 0 },
  { key: 'rbc', label: '红细胞计数', example: '4.8', value: '', unitOptions: ['x10^12/L'], unitIdx: 0 },
  { key: 'hba1c', label: '糖化血红蛋白(HbA1c)', example: '5.2', value: '', unitOptions: ['%', 'mmol/mol'], unitIdx: 0 },
  { key: 'albumin', label: '白蛋白', example: '46.2', value: '', unitOptions: ['g/L', 'g/dL'], unitIdx: 0 },
  { key: 'alp', label: '碱性磷酸酶(ALP)', example: '45', value: '', unitOptions: ['IU/L'], unitIdx: 0 },
  { key: 'urea', label: '尿素', example: '4.62', value: '', unitOptions: ['mmol/L', 'mg/dL'], unitIdx: 0 },
  { key: 'cholesterol', label: '总胆固醇', example: '4.17', value: '', unitOptions: ['mmol/L', 'mg/dL'], unitIdx: 0 },
  { key: 'creatinine', label: '肌酐', example: '80', value: '', unitOptions: ['μmol/L', 'mg/dL'], unitIdx: 0 },
  { key: 'cystatin_c', label: '胱抑素C', example: '1.01', value: '', unitOptions: ['mg/L', 'μmol/L'], unitIdx: 0 },
  { key: 'hscrp', label: '超敏C反应蛋白(hsCRP)', example: '0.55', value: '', unitOptions: ['mg/L', 'μg/mL'], unitIdx: 0 },
  { key: 'ggt', label: '谷氨酰转肽酶(GGT)', example: '13.25', value: '', unitOptions: ['IU/L'], unitIdx: 0 },
  { key: 'shbg', label: '性激素结合球蛋白(SHBG)', example: '57.22', value: '', unitOptions: ['nmol/L', 'μg/dL'], unitIdx: 0 },
  { key: 'vitd', label: '维生素D-25(OH)D', example: '24.91', value: '', unitOptions: ['ng/mL', 'nmol/L'], unitIdx: 0 },
  { key: 'rdw', label: '红细胞分布宽度(RDW)', example: '13.8', value: '', unitOptions: ['%'], unitIdx: 0 },
  { key: 'monoabs', label: '单核细胞(MONOabs)', example: '0.34', value: '', unitOptions: ['x10^9/L'], unitIdx: 0 },
  { key: 'neuabs', label: '中性粒细胞(NEUabs)', example: '3.79', value: '', unitOptions: ['x10^9/L'], unitIdx: 0 },
  { key: 'mcv', label: '平均红细胞体积(MCV)', example: '86', value: '', unitOptions: ['fL'], unitIdx: 0 },
  { key: 'alt', label: '丙氨酸氨基转移酶(ALT)', example: '18', value: '', unitOptions: ['IU/L'], unitIdx: 0 },
])
const missingIdxs = ref([])
const showBunDialog = ref(false)
const showWhereDialog = ref(false)
function fillExample(idx) {
  fields.value[idx].value = fields.value[idx].example
}
function fillAllExample() {
  fields.value.forEach(item => { item.value = item.example })
  // 自动触发表单提交
  const data = fields.value.map(item => ({
    key: item.key,
    label: item.label,
    value: item.value,
    unit: item.unitOptions ? item.unitOptions[item.unitIdx] : item.unit
  }))
  emit('submit', data)
}
function clearAll() {
  fields.value.forEach(item => { item.value = '' })
}
function onPickerChange(idx, e) {
  fields.value[idx].unitIdx = e.detail.value
}
function onSubmit() {
  // 校验所有输入项
  missingIdxs.value = []
  fields.value.forEach((item, idx) => {
    if (!item.value || String(item.value).trim() === '') {
      missingIdxs.value.push(idx)
    }
  })
  if (missingIdxs.value.length > 0) {
    const missLabels = missingIdxs.value.map(i => fields.value[i].label)
    uni.showToast({
      title: '请填写: ' + missLabels.join('、'),
      icon: 'none',
      duration: 2500
    })
    return
  }
  // 收集所有输入项数据
  const data = fields.value.map(item => ({
    key: item.key,
    label: item.label,
    value: item.value,
    unit: item.unitOptions ? item.unitOptions[item.unitIdx] : item.unit
  }))
  emit('submit', data)
}
function getUnitDesc(item) {
  // 可根据实际单位自定义说明
  const descMap = {
    'mmol/L': '常用国际单位',
    'mg/dL': '常用美国单位',
    '%': '百分比',
    'ng/mL': '纳克/毫升',
    'nmol/L': '纳摩尔/升',
    'μmol/L': '微摩尔/升',
    'g/L': '克/升',
    'g/dL': '克/分升',
    'IU/L': '国际单位/升',
    'μg/mL': '微克/毫升',
    'μg/dL': '微克/分升',
    'x10^12/L': '10的12次方/升',
    'x10^9/L': '10的9次方/升',
    'fL': '飞升升',
    'mmol/mol': '毫摩尔/摩尔',
  }
  return descMap[item.unitOptions[item.unitIdx]] || ''
}
</script>

<style scoped>
.form-area {
  background: #fff;
  margin: 24rpx 32rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx #eee;
  padding: 24rpx 0 32rpx 0;
}
.form-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 32rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
}
.optional {
  color: #ff9900;
  font-size: 24rpx;
}
.label-wrap {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.form-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx 0;
  flex-direction: column;
}
.form-item {
  display: flex;
  align-items: center;
  margin: 0 32rpx 12rpx 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
  padding-bottom: 8rpx;
}
.label {
  width: 180rpx;
  color: #333;
  font-size: 28rpx;
}
.input {
  flex: 1;
  font-size: 28rpx;
  border: none;
  background: transparent;
  padding: 8rpx 0;
}
.input::placeholder {
  color: #bbb;
  font-size: 24rpx;
}
.unit {
  width: 90rpx;
  color: #888;
  font-size: 26rpx;
  text-align: right;
}
.submit-btn {
  margin: 32rpx 32rpx 0 32rpx;
  font-size: 36rpx;
  border-radius: 16rpx;
  background: linear-gradient(90deg, #2196f3 0%, #42a5f5 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4rpx 16rpx #b3d8ff;
  border: none;
  height: 90rpx;
  line-height: 90rpx;
  letter-spacing: 2rpx;
  transition: background 0.2s;
}
.submit-btn:active {
  background: linear-gradient(90deg, #1976d2 0%, #2196f3 100%);
}
.form-item.missing {
  background: #fff7e6;
}
.required {
  color: #e43d33;
  font-size: 28rpx;
  margin-right: 8rpx;
}
.example-btn, .clear-btn {
  margin-left: 18rpx;
  font-size: 24rpx;
  padding: 0 28rpx;
  height: 44rpx;
  line-height: 44rpx;
  background: linear-gradient(90deg, #2196f3 0%, #42a5f5 100%);
  color: #fff;
  border: none;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 8rpx #b3d8ff;
  font-weight: 500;
  transition: background 0.2s;
}
.example-btn:active, .clear-btn:active {
  background: linear-gradient(90deg, #1976d2 0%, #2196f3 100%);
}
.unit-picker-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 110rpx;
}
.unit-select-btn {
  display: flex;
  align-items: center;
  background: #f4f8fb;
  border-radius: 10rpx;
  padding: 4rpx 18rpx 4rpx 12rpx;
  font-size: 26rpx;
  color: #1976d2;
  border: 1rpx solid #d0e2f6;
  cursor: pointer;
  transition: background 0.2s, border 0.2s;
}
.unit-select-btn:active {
  background: #e3f2fd;
  border-color: #42a5f5;
}
.unit-text {
  margin-right: 6rpx;
  font-weight: 500;
}
.unit-arrow {
  font-size: 20rpx;
  color: #888;
}
.unit-desc {
  color: #aaa;
  font-size: 20rpx;
  margin-top: 2rpx;
  text-align: right;
}
.bun-tip {
  margin-top: 2rpx;
}
.bun-tip-link {
  color: #1976d2;
  font-size: 22rpx;
  text-decoration: underline;
  cursor: pointer;
}
.bottom-tip {
  margin: 32rpx 0 0 0;
  text-align: left;
}
.bottom-tip-link {
  color: #1976d2;
  font-size: 24rpx;
  text-decoration: underline;
  cursor: pointer;
}
.dialog-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog-box {
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 4rpx 24rpx #bbb;
  padding: 40rpx 32rpx 32rpx 32rpx;
  max-width: 90vw;
  min-width: 320rpx;
}
.dialog-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1976d2;
  margin-bottom: 18rpx;
}
.dialog-content {
  color: #444;
  font-size: 26rpx;
  line-height: 1.7;
  margin-bottom: 24rpx;
}
.dialog-close {
  width: 100%;
  background: linear-gradient(90deg, #2196f3 0%, #42a5f5 100%);
  color: #fff;
  font-size: 28rpx;
  border: none;
  border-radius: 12rpx;
  padding: 16rpx 0;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx #b3d8ff;
}
.dialog-close:active {
  background: linear-gradient(90deg, #1976d2 0%, #2196f3 100%);
}
</style> 